<template>
    <div class="path">
        <Header>
            <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
            <div class="title">我的地址</div>
            <template v-slot:icon-r><span></span></template>
        </Header>
        <section>
            <ul v-if="list.length">
                <li @click="goSetPath(item,'set')" v-for="(item, index) of list" :key="index">
                    <div>
                        <span>{{ item.name }}</span>
                        <span>{{ item.tel }}</span>
                    </div>
                    <div class="city">
                        <span class='active' v-if="item.isDefault">[默认]</span>
                        <span>{{ item.province }}</span>
                        <span>{{ item.city }}</span>
                        <span>{{ item.county }}</span>
                        <span>{{ item.addressDetail }}</span>
                    </div>
                </li>
            </ul>
            <van-empty v-else class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="暂无地址" />
            <div class='add-path' @click="goAddPath({},'add')">添加地址</div>
        </section>
    </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { Empty } from 'vant';
import { mapState, mapMutations } from 'vuex'
export default {
    components: {
        Header,
        [Empty.name]:Empty
    },
    data() {
        return {

        }
    },
    computed: {
        ...mapState({
            list: state => state.path.list
        })
    },
    watch: {},
    methods: {
        ...mapMutations(['initData']),
        goBack() {
            if(this.$route.path == '/path'){
                this.$router.push({name:'my'})
            }else{
                this.$router.back()
            }
        },
        //新增地址
        goAddPath(option,model){
            if(this.$route.query.type == 'select'){
                //订单中来的新增地址
                this.$router.push({ name: 'setPath',query:{type:'addPath',page:2} })
                return
            }
            option.model = model
            if(model == 'add'){
                //新增地址
                this.$router.push({ name: 'setPath',params:{option} })
            }
        },
        //跳转编辑地址
        goSetPath(option,model) {
            if(this.$route.query.type == 'select'){
                //选择地址
                localStorage.setItem('selectPath',JSON.stringify(option))
                this.$router.back()
                return
            }
            option.model = model
            if(model == 'set'){
                //编辑地址
                this.$router.push({ name: 'setPath',params:{option} })
            }
            
        },
        //查询收货地址
        getData() {
            this.$axios({
                url: '/api/selectAddress',
                method: 'post',
                headers: {
                    token: true
                }
            }).then(res => {
                if (!res) return
                let data = res.data.data
                this.initData(data)
            })
        }
    },
    created() {
        this.getData()
    },
    mounted() { },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.path {
    .header {
        .title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
        }

        ::v-deep .icon-l {
            width: auto;
        }
    }

    section {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #F7F7F7;
        height: calc(100vh - 3.2rem);
        overflow: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        ul {
            width: 100%;

            li {
                padding: 0.266666rem 0.4rem;
                margin: 0.16rem 0;
                background-color: #FFFFFF;

                span {
                    padding-right: 0.4rem;
                    font-size: 0.426666rem;
                }

                .active {
                    color: #b0352f;
                }

                .city {
                    span {
                        padding-right: .2133rem;
                    }
                }
            }
        }

        .custom-image .van-empty__image {
            width: 90px;
            height: 90px;
        }

        .add-path {
            margin: 0.8rem 0;
            width: 3.2rem;
            line-height: 1.066666rem;
            font-size: 0.48rem;
            text-align: center;
            color: #FFFFFF;
            background-color: #b0352f;
            border-radius: 6px;
        }
    }
}
</style>
